<template>
  <div class="supplier-info-wrap">
    <Title title="账号信息" style="font-size:16px; margin:25px 0 10px 0"/>
    <!-- <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-width="showMobilePage?'110px':'150px'"
      :label-position="showMobilePage?'left':'right'"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="24" :class="showMobilePage?'indentation-form-item':''">
          <el-form-item label="审批单号(签约内审)：">
            <div v-if="data.signUpNum" :class="{'light-word':data.id && data.processId}" @click="toSignUpDetail">
              <ToolTip :content="data.signUpNum"/>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称：">
            <ToolTip :content="data.channelName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：" label-width="110px">
            <CheckUserInfo :user-id="data.createId" :label="data.createUser" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->
    <el-table
      :data="data.accountsInfoList">
      <el-table-column label="账号名称" min-width="140">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.accountName"/>
        </template>
      </el-table-column>
      <el-table-column label="平台" align="left">
        <template slot-scope="scope">
          <div class="flex-center">
            <PlatformIcon :data="scope.row.platformName" />
            <ToolTip :content="scope.row.platformName" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="账号ID">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.accountCode"/>
        </template>
      </el-table-column>
      <el-table-column label="供应商名称" min-width="140">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.supplierName"/>
        </template>
      </el-table-column>
      <el-table-column label="签单签约经纪" min-width="110">
        <template slot-scope="scope">
          <CheckUserInfo :user-id="scope.row.agentId" :label="scope.row.agentName" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import PlatformIcon from '@/components/Common/platformIcon';
import { mapState } from 'vuex';

export default {
  components: { Title, EmptyPlaceholder, PlatformIcon },
  filters: {
    formatSignStatus(val) {
      return {
        0: '未签约',
        1: '已签约',
        [-1]: '已解约'
      }[val];
    },
    signStatusColor(val) {
      return {
        0: '#31CC9C', // '未签约'
        1: '#406EFF', // '已签约'
        [-1]: '#FD8546' // '已解约'
      }[val];
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    toSignUpDetail() {
      if (this.data.id && this.data.processId) {
        const url = this.$router.resolve({
          name: 'signUpDetail',
          query: {
            signUpId: this.data.id,
            processId: this.data.processId
          }
        });
        window.open(url.href, '_blank');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-info-wrap{
  .supplier-form {
    margin-bottom: 16px;
    & ::v-deep {
      .indentation-form-item {
        .el-form-item {
          label {
            line-height: 1.2 !important;
          }
        }
      }
      .el-form-item {
        .el-form-item__label {
          color: #999 !important;
        }
      }
      .el-form-item__content {
        color: #333;
      }
    }
  }
  .dividing{
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(3n) {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
  .light-word {
    max-width: 150px;
    color: #406eff;
    cursor: pointer;
  }
}
</style>
